<template>
  <span id="cd_box" :endtime="endtime" :timeout="timeout" :wt='wt' :hg='hg' :beginMsg="beginMsg" :refreshMsg="refreshMsg" :verfityMobile="verfityMobile">
    <span class="countDown hoverhand" @click="run()">{{content}}</span><!--倒计时-->
    <span :id="tdId" reminder="同盾绑定id" class="td hoverhand" v-show="tdArea"></span><!--同盾按钮-->
  </span>
</template>
<script>
  import tdPublic from '../common/js/tongdun';
  // <count-down :wt='1.6rem' :hg='1rem' ref="timerbtn"  beginMsg="获取验证码" refreshMsg="重新获取" :verfityMobile="true(是否需要验证手机)"
  // timeout="1000" endtime="60" @run="getCode获取验证码函数" @getTdToken="验证成功获取token"></count-down>
  // 开始倒计时 ：thiz.$refs.timerbtn.begin(callback)
  // 获取同盾token：thiz.$refs.timerbtn.getTdToken( res )
  //重置功能 : thiz.$refs.timerbtn.resetTd();
  // 判断倒计时是否在进行中：this.$refs.timerbtn.interval; 没进行是null
  //@success ="function()"  同盾组件渲染完毕发送通知
  export default {
    name: "CountDown",
    data() {
      return {
        introduce: '同盾_倒计时插件',
        interval: null,
        tdId:'td' + Math.floor(Math.random()*(1-10000) + 10000),
        content: '',//按钮内容
        againMsg: '',
        tdwidth: '',
        tdheight: '',
        // callback: '', //验证码回调函数
        yzm_token: '', //同盾token
        blackBox: '', //同盾id
        reset : null,//重载同盾方法
        tdParams: '' ,//new同盾参数
        tdArea : true,//是否显示同盾绑定按钮
        mobile : '',//手机号
        needMobile : '',//是否同盾之前验证手机
        removeTd : '',//删除同盾弹窗
      }
    },
    props: {
      'beginMsg': {
        /*默认开始的提示文字*/
        type: String,
        default: ''
      },
      'endtime': {
        /*结束时间  秒数 */
        type: [Number, String],
        default: 60
      },
      'hg': {
        /*同盾高度*/
        type: String,
        default: '1.2rem'
      },
      'wt': {
        /*同盾宽度*/
        type: String,
        default: '2.5rem'
      },
      'timeout': {
        /*倒计时间隔时间*/
        type: [Number, String],
        default: 1000
      },
      'refreshMsg': {
        /*重新获取，文字提示*/
        type: String,
        default: '重新获取'
      },
      'verfityMobile' : {
        /*是否需要验证手机输入*/
        type: String,
        default: false
      }
    },
    mounted() {
      this.needMobile = this.verfityMobile || false;
      console.log('this.needMobile',this.needMobile)
      this.content = this.beginMsg || '获取验证码';
      this.againMsg = this.refreshMsg || '重新获取';
      this.tdheight = this.hg || '1.2rem';
      this.tdwidth = this.wt || '2.6rem';
      this.newtongdun(this.tdheight , this.tdwidth);
      this.$emit('success'); //发送渲染完毕通知
    },
    methods: {
      newtongdun: function( h , w ) {
        let thiz = this;
        thiz.tdParams = {
          display : 'bind',
          container: '#' + thiz.tdId,
          width: w,
          height: h
        };
        if( thiz.needMobile == 'true'){
          thiz.tdParams.beforeValidate = function () {
            if( !thiz.mobile ){
              require('../common/js/toast').toast('请先输入手机号');
              return false;
            }else{
              return true;
            }
          }
        }
        if (!thiz.yzm_token) {
          tdPublic(thiz.tdParams, function(ret) {
            thiz.yzm_token = ret.validateToken;
            thiz.blackBox = ret.blackBox;
            thiz.reset = ret.reset;
            thiz.tdArea = false;
            thiz.$emit('getTdToken');//调用页面中的getTdToken拿到token
            // timeout = setTimeout(function () {
            //   thiz.$emit('getTdToken');//调用页面中的getTdToken拿到token
            //   clearTimeout(timeout);
            //   timeout = null;
            // },1000)
          });
        }
      },
      getMobile( mobile ){
        //获取父级页面的手机号
        this.mobile = mobile;
      },
      getTdToken : function( callback ){
        //返回同盾验证数据
        let thiz = this;
        if(callback){
          let ret =  {
            yzm_token : thiz.yzm_token ,  blackBox : thiz.blackBox
          };
          callback( ret );
        }
      },
      resetTd:function(){
        //封装重置同盾方法
        let thiz = this;
        thiz.tdArea = true;
        thiz.content = thiz.beginMsg || '获取验证码';
        clearInterval(thiz.interval);
        thiz.interval = null;
        thiz.reset();
      },
      run: function() {
        if (this.interval != null) {
          let toast = require('../common/js/toast').toast;
          toast('请勿重复点击^_^');
          return false;
        }
        this.$emit('run');  //调用父级页面的获取验证码函数 ajax成功后，begin() 开始倒计时
      },
      begin() {
        //点击开始倒计时
        let thiz = this , start = Number(thiz.endtime);
        let beginTime = !Number(thiz.timeout) || !Number(thiz.endtime);
        if (beginTime) {
          return false;
        }
        clearInterval(thiz.interval);
        thiz.interval = null;
        thiz.content = start + '秒';
        thiz.interval = setInterval(function() {
          if (start != 0) {
            start--;
            thiz.content = start + 's';
          } else {
            thiz.content = thiz.againMsg;
            clearInterval(thiz.interval);
            thiz.interval = null;
            thiz.tdArea = true;
            thiz.reset();//倒计时结束，默认重载同盾
          }
        }, thiz.timeout)
      },
    },
    destroyed() {
      let thiz = this;
      clearInterval(thiz.interval);
      thiz.interval = null;
      thiz.reset = null; //清除本页面同盾占用内存
      thiz.tdParams = null;
      let tdEle = document.getElementsByClassName('td-outer-wrapper')[0];
      if( tdEle ) {
        tdEle.remove();//防止点开验证，直接点击返回其他页面，同盾弹窗还在
      }
      tdEle = null;
    }
  }
</script>
<style type='text/less' lang="less" scoped>
  #cd_box {
    width: 100%;
    height: 100%;
    position: absolute;
    display: inline-block;
    left: 0;
    top: 0;
  }

  .countDown {
    display: inline-block;
    width: 100%;
    text-align: center;
    position: relative;
  }

  /*.countDown>.td-btn-cnt{position: absolute;z-index: 1;top:0;left: 0;width: 100%;height: 100%;}*/
  /*#td div{border: none!important;}*/
  .td {
    display: inline-block;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    opacity: 0;
    /deep/ .td-btn-wrapper>div{
      border:0;
      border-left:0.01rem solid#ccc;
    }
  }
</style>
